<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        // 通过font属性设置字体样式,   '大小/font-family',注意大小是要加单位的
        ctx.font = '100px Microsoft YaHei';

        /*
            填充渲染文字fillText()
            参数1为文本信息也就是字符串
            参数2、3为文字左上角的坐标
            参数4(非必须) 为最大宽度限制，如果文本超出了这个数值，将会被整体挤压为这个宽度
            比如我们上面给字体设置为了100px大小，这里给出100，那么'老韩'两个字就会被挤压成一个字的宽度
        */

        // 其实下面文本的坐标x，y就是文字的左下角

        // fillText(文本, 文本的起点x, 文本的起点y, 文本的最大宽度)
        ctx.fillText('老韩', 300, 200, 100);

        // strokeText(文本, 文本的起点x, 文本的起点y, 文本的最大宽度)
        ctx.strokeText('MK',100,100,200);

        // textAlign设置文本的水平方向对齐方式: start(默认)开始、center居中、left居左、right居右、end末尾
        ctx.textAlign = 'center';
        // textBaseline设置文本的垂直对齐方式：top顶部、bottom底部、middle居中、alphabetic(默认)基线
        ctx.textBaseline = 'middle';
        ctx.strokeText('我是居中的',400,300);

        // 文本的方向, 这个用的比较少
        ctx.direction = 'rtl';

        // measureText可以预测量文本宽度, 可以配合绘制文字时需要传入的文本最大宽度使用
        console.log(ctx.measureText('hello'));
    </script>
</body>

</html>